
/**
 * @desc 赛事列表-后勤管理，新增/修改酒店预订时间弹框
 * @author yd_zhaorongjun
 */
<template>
  <div>
    <el-dialog
      title="预订时间设置"
      class="gl_dialog_TitleLine gl_dl_footer"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="450px"
    >
      <el-scrollbar v-loading="loading" wrap-class="scrollbar-wrapper gl_dialog_height">
        <el-form ref="api_POST_LogisticReservationInput" class="gl_form_mini" :model="api_POST_LogisticReservationInput" :rules="ReservationTime_Rules" label-position="top" label-width="120px" style="padding:0 30px">
          <el-row :gutter="20">
            <el-col :span="19">
              <!-- 时间设置 -->
              <el-form-item label="库存时间" prop="startDateTime">
                <el-input v-show="false" v-model.trim="api_POST_LogisticReservationInput.startDateTime" />
                <el-date-picker
                  v-model="timeList"
                  type="daterange"
                  range-separator="至"
                  :start-placeholder="api_POST_LogisticReservationInput.reservationCode === 'Hotel'?'入住时间':'开始日期'"
                  :end-placeholder="api_POST_LogisticReservationInput.reservationCode === 'Hotel'?'离店时间':'结束日期'"
                  style="width: 100%;"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  size="mini"
                  @change="handleEntryTime"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5" style="margin-top: 40px;">
              共 {{ dateNums }} {{ ' 天' }}
            </el-col>
          </el-row>
          <!-- <el-row :gutter="20" v-if="timeList[0]">
            <el-col :span="19">
              <el-form-item label="预定时间(只读)">
                {{timeList[0].split('T')[0] + '至' + chargesFormat}}
              </el-form-item>
            </el-col>
          </el-row> -->
          <el-row :gutter="20">
            <el-col :span="19">
              <el-form-item label="预定截止时间" prop="expirationTime">
                <el-input v-show="false" v-model.trim="api_POST_LogisticReservationInput.expirationTime" />
                <el-date-picker
                  v-model="expirationTime"
                  type="datetime"
                  placeholder="请选择预定截止时间"
                  style="width: 100%;"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="mini"
                  @change="handleexpirationTime"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>

      <span slot="footer" class="dialog-footer">
        <!-- 取消按钮 -->
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <!-- 保存按钮 -->
        <el-button v-if="type == 'add'" type="primary" :loading="submitLoading" size="mini" @click="saveNew()">确 定</el-button>
        <!-- 保存按钮 -->
        <el-button v-else type="primary" :loading="submitLoading" size="mini" @click="saveEdit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import validator from '@/lib/validate/index.js';
import { deepCopy } from '@/lib';
import { SiSTKWEventsManagementCreateLogisticReservationInput } from '@/lib/form/game/swaggerForm';

export default {
  name: 'AddOrEditCar',
  props: {
    // 此判断689需求改为天，此判断无效
    isHotel: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      api_POST_LogisticReservationInput: new SiSTKWEventsManagementCreateLogisticReservationInput(),
      ReservationTime_Rules: { // 必填项，验证密码格式
        startDateTime: [
          validator.required('时间范围不能为空')
        ],
        endDateTime: [
          validator.required('时间范围不能为空')
        ],
        expirationTime: [
          validator.required('预定截至时间不能为空')
        ]
      },
      title: '',
      expirationTime: '',
      loading: false,
      submitLoading: false,
      dialogVisible: false,
      gameId: '',
      timeList: [], // 时间设置
      dateNums: 0,
      type: '', // 弹框状态，是新增和是修改 new 是新增，edit是修改
      editId: '', // 编辑时候的id
      isTrain: false // 判断是不是培训管理里的后勤
    };
  },
  computed: {
    // chargesFormat() {
    //   if(this.timeList[1]) {
    //     const date = new Date(this.timeList[1]);
    //     date.setDate(date.getDate() + 1);
    //     const year = date.getFullYear();
    //     const month = String(date.getMonth() + 1).padStart(2, "0");
    //     const day = String(date.getDate()).padStart(2, "0");
    //     const tomorrow = `${year}-${month}-${day}`;
    //     return tomorrow;
    //   }

    // }
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.$refs['api_POST_LogisticReservationInput'].resetFields();
      }
    }
  },
  methods: {
    open(bookingTime, type, gameId, moduleType) {
      this.loading = true;
      this.gameId = gameId;
      this.type = type;
      if (this.$route.path.indexOf('/train/') > -1) {
        this.isTrain = true;
      }
      if (bookingTime) {
        this.api_POST_LogisticReservationInput = deepCopy(bookingTime);
        this.timeList = [bookingTime && bookingTime.startDateTime, bookingTime && bookingTime.endDateTime];
        this.dateNums = this.getNumberOfDays(bookingTime.startDateTime, bookingTime.endDateTime);
        this.expirationTime = bookingTime.expirationTime && bookingTime.expirationTime.replace('T', ' ');
      } else {
        this.api_POST_LogisticReservationInput = new SiSTKWEventsManagementCreateLogisticReservationInput();
        this.timeList = [];
        this.expirationTime = '';
      }
      this.api_POST_LogisticReservationInput.providerKey = this.gameId;
      this.api_POST_LogisticReservationInput.reservationCode = moduleType;
      this.api_POST_LogisticReservationInput.providerName = this.isTrain ? 'T' : 'C';
      this.$nextTick(() => {
        this.dialogVisible = true;
        this.loading = false;
      });
    },
    handleexpirationTime() {
      console.log(this.api_POST_LogisticReservationInput);
      this.api_POST_LogisticReservationInput.expirationTime = this.expirationTime;
    },
    // 处理时间
    handleEntryTime() {
      this.api_POST_LogisticReservationInput.startDateTime = this.timeList && this.timeList[0];
      this.api_POST_LogisticReservationInput.endDateTime = this.timeList && this.timeList[1];
      this.dateNums = this.getNumberOfDays(this.api_POST_LogisticReservationInput.startDateTime, this.api_POST_LogisticReservationInput.endDateTime);
      // console.log(this.dateNums);
    },
    getNumberOfDays(date1, date2) {
      // date1：开始日期，date2结束日期
      const a1 = Date.parse(new Date(date1));
      const a2 = Date.parse(new Date(date2));
      console.log(a1);
      let day = 0;
      if ( true ) { // 设置酒店时间按每晚，其他按每天计算
        if (a1 === 0) { // 时间为空时,天数为0
          day = 0;
        } else if (a1 === a2) { // 开始时间和结束时间相同时，天数为1
          day = 1;
        } else { // 反之 +1
          day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24)) + 1;// 核心：时间戳相减，后除以天数
        }
      } else {
        day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24));// 核心：时间戳相减，后除以天数
      }
      return day;
    },
    // 新增
    saveNew() {
      console.log(this.api_POST_LogisticReservationInput);
      this.$refs.api_POST_LogisticReservationInput.validate(valid => {
        this.submitLoading = true;
        this.api_POST_LogisticReservationInput.reservationCode;
        if (valid) {
          this.$emit('insert', this.api_POST_LogisticReservationInput);
        } else {
          this.submitLoading = false;
          return false;
        }
      });
    },
    // 修改
    saveEdit() {
      console.log(this.api_POST_LogisticReservationInput);
      this.$refs.api_POST_LogisticReservationInput.validate(valid => {
        this.submitLoading = true;
        if (valid) {
          this.$emit('update', this.api_POST_LogisticReservationInput);
        } else {
          this.submitLoading = false;
          return false;
        }
      });
    }
  }
};
</script>
